<template>
	<view class="sub-tab-navigation">
		<NavHeader :title="title" :isShowHeader='false'>
			<view slot='header' style="display: flex;align-items: center;" @click="goBack">
				<uni-icons type="arrow-left" color='#fff' size="24"></uni-icons> {{title}}
			</view>
		</NavHeader>
		<view class="tabs-box">
			<subTabs :list="tabs" :current="currentTab" :scroll-count='4' bottom-space='0' class="tabs" active-color='#fff'
				inactive-color='#fff' bg-color='transparent' @change="tabChange"></subTabs>
			<image class="tab-more" src="/static/tabs-more1.png"></image>
		</view>
	</view>
</template>

<script>
	import NavHeader from '@/components/nacigation/NavHeader.vue';
	import subTabs from '@/uni_modules/z-tabs/components/z-tabs/sub-tabs.vue';

	export default {
		components: {
			NavHeader,
			subTabs
		},
		props: {
			title: {
				type: String,
				default: '标题'
			},
			currentTab: {
				type: Number,
				default: 0
			},
			tabs: {
				type: Array,
				default: ['广州市', '越秀区', '海珠区', '荔湾区', '天河区']
			},
		},
		emits: ['tabChange'],
		data() {
			return {}
		},
		methods: {
			tabChange(val) {
				this.$emit('tabChange', val); // 触发父组件事件
			},
			goBack() {
				uni.navigateBack({
					delta: 1 // 返回上一级页面
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.sub-tab-navigation {
		width: 100%;
		position: relative;

		.tabs-box {
			position: absolute;
			bottom: -1rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;

			.tabs {
				width: 100%;
			}

			.tab-more {
				width: 32rpx;
				height: 32rpx;
				padding-right: 32rpx;
			}
		}


	}
</style>